import 'dart:io';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_project/appbar.dart';

void main() {
  runApp(const MyApp());
  if (Platform.isAndroid) {
    //todo 设置Android头部的导航栏透明,【需要注意的是，该更改需要重新运行，热更新无效】
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
        statusBarColor: Colors.transparent, //全局设置透明
        statusBarIconBrightness: Brightness.light
        //light:黑色图标 dark：白色图标
        //在此处设置statusBarIconBrightness为全局设置
        );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
      ),
      debugShowCheckedModeBanner: false, // 不显示右上角的debug标签
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // todo 指定页面的背景色
      backgroundColor: Color(0xffffffff),
      //--------------------------------------------------------------------------
      // 封装了一个AppBar
      appBar: CommonAppBar(
        bgColor: Color(0xfff1f1f7),
        titleName: "指定的文字",
        titleColor: Color(0xff1c1c1e),
        titleSize: 17,
      ),
      // 以上部分为标题栏部分的
      //--------------------------------------------------------------------------
      body: Scrollbar(
        thumbVisibility: true,
        child: SingleChildScrollView(
          // 回弹效果--iOS
          // physics: BouncingScrollPhysics(),
          // 微光---Android
          physics: ClampingScrollPhysics(),
          child: Column(
            // todo center 中间；start:顶部；end:底部 ，指定竖直方向的对齐方式
            mainAxisAlignment: MainAxisAlignment.start,
            // todo center 中间；start:左边；end:右边 ，指定水平方向的对齐方式
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: double.infinity,
                alignment: Alignment.centerLeft,
                // 这个Padding用户控制整体的Padding的距离
                padding: const EdgeInsets.only(
                    left: 16.0, top: 6, right: 16, bottom: 0),
                child: Container(
                  // 这个Padding用于限制下划线与Text的距离
                  padding: const EdgeInsets.only(
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 6,
                  ),
                  child: const Text(
                    // 'You have pushed You have pushed You have pushed You have pushed You have pushed You have pushed ',
                    // '下划线',
                    // todo 【自定义字体】使用自定义字体会影响到Text的顶部的高度，需要进行注意（会使得，第一行顶部与Text顶部的高度与默认的高度会有区别）
                    '使用自定义的字体',
                    style: TextStyle(
                      color: Colors.black,
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                      // todo 【自定义字体】
                      fontFamily: "Harmony",
                    ),
                  ),
                ),
              ),
              // todo 虽然能切圆角，但似乎并非想要的效果，需要进行改进
              // 圆角弧度问题:需要让图片宽高与组件宽高保持比例一致，否则设置的弧度过渡不自然，

              ClipRRect(
                borderRadius: const BorderRadius.all(Radius.circular(20)),
                child: Image.asset(
                  "assets/images/tag.png",
                  width: 150,
                  height: 150,
                  fit: BoxFit.fill,// 这里设置后能够让宽高比例与图片比例不一致时，设置的弧度显示能够自然
                  // fit: BoxFit.cover,// 这里设置后能够让宽高比例与图片比例不一致时，设置的弧度显示能够自然
                  /**
                   * todo fit比较像scaleType，fill类似fixXY，cover类似centerFit
                   */
                ),
              ),
              Container(
                width: double.infinity,
                alignment: Alignment.centerLeft,
                // 这个Padding用户控制整体的Padding的距离
                padding: const EdgeInsets.only(
                    left: 16.0, top: 6, right: 16, bottom: 0),
                child: Container(
                  // 这个Padding用于限制下划线与Text的距离
                  padding: const EdgeInsets.only(
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 6,
                  ),
                  decoration: const BoxDecoration(
                    border: Border(
                      // todo 设置下划线位置，为底部，颜色为蓝色，宽度度1dp，【当Text宽度不足一行时，下划线也只会显示到文字宽度的位置】
                      bottom: BorderSide(
                        width: 1.0,
                        color: Colors.blue,
                      ),
                    ),
                  ),
                  child: const Text(
                    // 'You have pushed You have pushed You have pushed You have pushed You have pushed You have pushed ',
                    // '下划线',
                    '下划线下划线下划线下划线下划线下划线下划线下划线下划线下划线下划线下划线下划线下划线下划线下划线下划线下划线下划线',
                    style: TextStyle(
                      color: Colors.black,
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                    ),
                  ),
                ),
              ),
              Container(
                width: double.infinity,
                alignment: Alignment.centerLeft,
                // 这个Padding用户控制整体的Padding的距离
                padding: const EdgeInsets.only(
                  left: 16.0,
                  top: 6,
                  right: 16,
                  bottom: 0,
                ),
                child: Container(
                  // 这个Padding用于限制下划线与Text的距离
                  padding: const EdgeInsets.only(
                    left: 8,
                    top: 6,
                    right: 8,
                    bottom: 6,
                  ),
                  decoration: const BoxDecoration(
                      color: Colors.blue,
                      // todo 这里指定圆角的颜色---但这里设置的是整个背景的颜色
                      borderRadius:
                          BorderRadius.all(Radius.circular(6)) //todo 这里指定圆角的弧度
                      ),
                  child: const Text(
                    // '圆角背景 ',
                    '圆角背景圆角背景圆角背景圆角背景圆角背景圆角背景圆角背景圆角背景圆角背景圆角背景圆角背景圆角背景圆角背景圆角背景',
                    style: TextStyle(
                      color: Colors.white,
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                    ),
                  ),
                ),
              ),
              Container(
                width: double.infinity,
                alignment: Alignment.centerLeft,
                // 这个Padding用户控制整体的Padding的距离
                padding: const EdgeInsets.only(
                  left: 16.0,
                  top: 6,
                  right: 16,
                  bottom: 0,
                ),
                child: Container(
                  // 这个Padding用于限制下划线与Text的距离
                  padding: const EdgeInsets.only(
                    left: 8,
                    top: 6,
                    right: 8,
                    bottom: 6,
                  ),
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.blue,
                      width: 1.0,
                      style: BorderStyle.solid,
                      strokeAlign: StrokeAlign.inside,
                    ),
                    borderRadius: const BorderRadius.all(
                        Radius.circular(6)), //todo 这里指定圆角的弧度
                  ),
                  child: const Text(
                    // '圆角背景',
                    '圆角线框圆角线框圆角线框圆角线框圆角线框圆角线框圆角线框圆角线框圆角线框圆角线框圆角线框圆角线框圆角线框圆角线框',
                    style: TextStyle(
                      color: Colors.blue,
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                    ),
                  ),
                ),
              ),
              Container(
                width: double.infinity,
                alignment: Alignment.centerLeft,
                // 这个Padding用户控制整体的Padding的距离
                padding: const EdgeInsets.only(
                  left: 16.0,
                  top: 6,
                  right: 16,
                  bottom: 0,
                ),
                child: Container(
                  // 这个Padding用于限制下划线与Text的距离
                  padding: const EdgeInsets.all(20),
                  decoration: const BoxDecoration(
                    // color: Colors.grey,
                    shape: BoxShape.rectangle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        blurRadius: 6,
                      )
                    ], // 阴影
                    borderRadius:
                        BorderRadius.all(Radius.circular(6)), //todo 这里指定圆角的弧度
                    gradient: LinearGradient(
                      // 这里指定了渐变的颜色方向
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                        Colors.red,
                        Colors.blue,
                      ],
                    ),
                  ),
                  child: const Text(
                    '圆形背景圆形背景圆形背景圆形背景圆形背景',
                    style: TextStyle(
                      color: Colors.white,
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                    ),
                  ),
                ),
              ),
              Container(
                width: double.infinity,
                alignment: Alignment.centerLeft,
                // 这个Padding用户控制整体的Padding的距离
                padding: const EdgeInsets.only(
                  left: 16.0,
                  top: 6,
                  right: 16,
                  bottom: 0,
                ),
                child: Container(
                  // 这个Padding用于限制下划线与Text的距离
                  padding: const EdgeInsets.all(20),
                  decoration: const BoxDecoration(
                    // color: Colors.grey,
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        blurRadius: 6,
                      ),
                    ],
                    // ---- 这里不能设置，否则无法运行
                    // borderRadius: BorderRadius.all(Radius.circular(6)),
                    //todo 这里指定圆角的弧度
                    gradient: SweepGradient(
                      center: FractionalOffset.center,
                      startAngle: 0.0,
                      endAngle: pi * 2,
                      colors: <Color>[
                        Colors.red,
                        Colors.yellow,
                        Colors.blue,
                        Colors.green,
                        Colors.red,
                      ],
                    ),
                  ),
                  child: const Text(
                    '圆形背景圆形背景圆形背景圆形背景圆形背景',
                    style: TextStyle(
                      color: Colors.grey,
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                    ),
                  ),
                ),
              ),
              Container(
                width: double.infinity,
                alignment: Alignment.centerLeft,
                // 这个Padding用户控制整体的Padding的距离
                padding: const EdgeInsets.only(
                  left: 16.0,
                  top: 6,
                  right: 16,
                  bottom: 0,
                ),
                child: Container(
                  // 这个Padding用于限制下划线与Text的距离
                  padding: const EdgeInsets.all(20),
                  decoration: const BoxDecoration(
                    // color: Colors.grey,
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        blurRadius: 6,
                      ),
                    ],
                    // ---- 这里不能设置，否则无法运行
                    // borderRadius: BorderRadius.all(Radius.circular(6)),
                    //todo 这里指定圆角的弧度
                    gradient: RadialGradient(
                      radius: 0.6,
                      // 下面两个需要成对使用，两个的数量需要进行对应，否则View无法显示【需要数量对应】
                      stops: <double>[
                        0.2,
                        0.5,
                        0.8,
                      ],
                      colors: <Color>[
                        Colors.red,
                        Colors.blue,
                        Colors.yellow,
                      ],
                    ),
                  ),
                  child: const Text(
                    '圆形背景圆形背景圆形背景圆形背景圆形背景',
                    style: TextStyle(
                      color: Colors.grey,
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                    ),
                  ),
                ),
              ),
              Container(
                width: 100,
                height: 100,
                // todo 如果需要保证显示的背景包裹整个文字，则对其方式需要是center
                alignment: Alignment.center,
                // 这个Padding用户控制整体的Padding的距离
                padding: const EdgeInsets.only(
                  left: 16.0,
                  top: 6,
                  right: 16,
                  bottom: 0,
                ),
                child: Container(
                  // 这个Padding用于限制下划线与Text的距离
                  padding: const EdgeInsets.all(20),
                  decoration: const BoxDecoration(
                    // color: Colors.grey,
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        blurRadius: 6,
                      ),
                    ],
                    // ---- 这里不能设置，否则无法运行
                    // borderRadius: BorderRadius.all(Radius.circular(6)),
                    //todo 这里指定圆角的弧度
                    gradient: RadialGradient(
                      radius: 0.6,
                      // 下面两个需要成对使用，两个的数量需要进行对应，否则View无法显示
                      stops: <double>[
                        0.2,
                        0.5,
                        0.8,
                      ],
                      colors: <Color>[
                        Colors.red,
                        Colors.blue,
                        Colors.yellow,
                      ],
                    ),
                  ),
                  child: const Text(
                    '圆形背景',
                    style: TextStyle(
                      color: Colors.grey,
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                    ),
                  ),
                ),
              ),
              // 让整个组件居中
              Center(
                child: Container(
                  width: 100,
                  height: 100,
                  // todo 如果需要保证显示的背景包裹整个文字，则对其方式需要是center
                  alignment: Alignment.center,
                  // 这个Padding用户控制整体的Padding的距离
                  padding: const EdgeInsets.only(
                    left: 16.0,
                    top: 6,
                    right: 16,
                    bottom: 0,
                  ),
                  child: Container(
                    // 这个Padding用于限制下划线与Text的距离
                    padding: const EdgeInsets.all(20),
                    decoration: const BoxDecoration(
                      // color: Colors.grey,
                      shape: BoxShape.circle,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey,
                          blurRadius: 6,
                        ),
                      ],
                      // ---- 这里不能设置，否则无法运行
                      // borderRadius: BorderRadius.all(Radius.circular(6)),
                      //todo 这里指定圆角的弧度
                      gradient: RadialGradient(
                        radius: 0.6,
                        // 下面两个需要成对使用，两个的数量需要进行对应，否则View无法显示
                        stops: <double>[0.2, 0.5, 0.8],
                        colors: <Color>[
                          Colors.red,
                          Colors.blue,
                          Colors.yellow,
                        ],
                      ),
                    ),
                    child: const Text(
                      '圆形背景',
                      style: TextStyle(
                        color: Colors.white,
                        fontStyle: FontStyle.normal,
                        fontWeight: FontWeight.normal,
                        fontSize: 12,
                      ),
                    ),
                  ),
                ),
              ),
              Center(
                child: Container(
                  width: 100,
                  height: 100,
                  // todo 如果需要保证显示的背景包裹整个文字，则对其方式需要是center
                  alignment: Alignment.center,
                  // 这个Padding用户控制整体的Padding的距离
                  padding: const EdgeInsets.only(
                    left: 16.0,
                    top: 6,
                    right: 16,
                    bottom: 0,
                  ),
                  child: Container(
                    // 这个Padding用于限制下划线与Text的距离
                    padding: const EdgeInsets.all(20),
                    decoration: const BoxDecoration(
                      // color: Colors.grey,
                      shape: BoxShape.circle,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey,
                          blurRadius: 6,
                        ),
                      ],
                      // ---- 这里不能设置，否则无法运行
                      // borderRadius: BorderRadius.all(Radius.circular(6)),
                      //todo 这里指定圆角的弧度
                      gradient: RadialGradient(
                        radius: 0.6,
                        // 下面两个需要成对使用，两个的数量需要进行对应，否则View无法显示
                        stops: <double>[0.2, 0.5, 0.8],
                        colors: <Color>[
                          Colors.red,
                          Colors.blue,
                          Colors.yellow,
                        ],
                      ),
                    ),
                    child: const Text(
                      '圆形背景',
                      style: TextStyle(
                        color: Colors.white,
                        fontStyle: FontStyle.normal,
                        fontWeight: FontWeight.normal,
                        fontSize: 12,
                      ),
                    ),
                  ),
                ),
              ),
              Column(
                children: const [
                  Text("Column"),
                ],
              ),
              Row(
                children: const [
                  Text("Row"),
                ],
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: Container(
                  width: 360,
                  height: 360,
                  color: Colors.grey,
                  padding: const EdgeInsets.all(8),
                  // todo 层叠空间，需要搭配Align和Positioned使用
                  child: Stack(
                    /**
                     * todo 优点：方便对应View进行定位；缺点：无法自适应内部的View高度，
                     * todo Positioned，似乎无法适应View的宽度，导致过长的文本会超出View右边的边界，而无法显示
                     */
                    clipBehavior: Clip.hardEdge,
                    children: const [
                      Align(
                        // todo 居中
                        alignment: Alignment(0, 0),
                        child: Text("文本1（0，0）"),
                      ),
                      Align(
                        // todo 左上
                        alignment: Alignment(-1, -1),
                        child: Text("文本2(-1, -1)"),
                      ),
                      Align(
                        // todo 右下
                        alignment: Alignment(1, 1),
                        child: Text("文本3(1, 1)"),
                      ),
                      Align(
                        // todo 左下（似乎修改了Y的值似乎没有效果----在没有指定所在容器高度时，是看不出对应的效果的）
                        alignment: Alignment(-1, 1),
                        child: Text("文本4(-1, 1)"),
                      ),
                      Align(
                        // todo 右上，影响的是View的位置，但不会影响View本身内部的数据的排列对其方式（在不指定的情况下，文本的对其方式还是左对齐）
                        alignment: Alignment(1, -1),
                        child: SizedBox(
                          width: 120.0,
                          child: Text(
                              "文本5(1, -11)5555555123456789987456123456789456123"),
                        ),
                      ),
                      // Align(
                      //   // todo 需要注意对应值的范围是 （-1）～（0）～（1），对应的距离按照距离-1的比例来得出
                      //   // todo 所以，这里位置为坐上角忘右下角1/4距离的位置
                      //   alignment: Alignment(-0.5, -0.5),
                      //   child: Text("0"),
                      // ),
                      Positioned(
                        // todo 在不指定的情况下，对应的位置为左上角
                        child: Text("1"),
                      ),
                      Positioned(
                        /*
                        https://juejin.cn/user/4283353031783015/posts
                        https://juejin.cn/post/7025846069737046023
                         */
                        left: 120,
                        top: 120,
                        // todo 指定位置后，为相对于Stack宽高左上角（0，0）所对应的位置
                        // todo 当通过Container限制了Text宽度后，使得Text不再会超出宽而显示不完全
                        child: SizedBox(
                          width: 240.0,
                          child: Text(
                              "333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333"),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: Container(
                  padding: const EdgeInsets.all(8),
                  decoration: const BoxDecoration(
                      color: Colors.blue,
                      // todo 这里指定圆角的颜色---但这里设置的是整个背景的颜色
                      borderRadius:
                          BorderRadius.all(Radius.circular(6)) //todo 这里指定圆角的弧度
                      ),
                  child: Stack(
                    alignment: AlignmentDirectional.center,
                    children: [
                      // todo Positioned 用于定义组件显示的位置（在Stack内会覆盖）
                      const Positioned(
                        right: 1.0,
                        child: Text("Stack"),
                      ),
                      Row(
                        children: const [
                          // todo 让占用的位置扩展
                          Expanded(
                            child: Text(
                              "Stack",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontStyle: FontStyle.normal,
                                  fontWeight: FontWeight.normal,
                                  fontSize: 14.0),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),

              // ConstrainedBox(
              //   constraints: BoxConstraints.expand(),
              //   child: Stack(
              //     alignment: AlignmentDirectional.center,
              //     children: [
              //       Text("Stack"),
              //       Positioned(
              //         left: 18.0,
              //         child: Text("Stack"),
              //       ),
              //     ],
              //   ),
              // ),
              // Expanded(child: Text("Expanded")),
              // Flexible(child: Text("Flexible")),
              // Positioned(child: Text("Positioned")),
              // Align(child: Text("Align")),
              // Center(child: Text("Center")),
              // 相当于指定了一个高1的View
              const SizedBox(height: 1),
              // todo 指定背景样式
              Container(
                padding: const EdgeInsets.only(
                    left: 16.0, top: 0, right: 16, bottom: 16.0),
                child: Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
